<template>
  <div class="ratingsFilter">
    <!-- 2.1 评论类型 -->
    <div class="ratings-types">
      <!-- 2.1.1 全部/满意/不满意 -->
      <span
        class="ratings-result positive"
        :class="{ active: selected === 2 }"
        @click="changeSelected(2)"
        >{{ratingsType[0]}}<span>{{ this.ratings.length }}</span></span
      >
      <span
        class="ratings-result positive"
        :class="{ active: selected === 0 }"
        @click="changeSelected(0)"
        >{{ratingsType[1]}}<span>{{ positiveCount }}</span
        ><!-- {{satisfiedCount}} --></span
      >
      <span
        class="ratings-result negative"
        :class="{ active: selected === 1 }"
        @click="changeSelected(1)"
        >{{ratingsType[2]}}<span>{{ negativeCount }}</span></span
      >
    </div>
    <!-- 2.1.2 只看有内容的评论 -->
    <div class="onlyContent" :class="{ active: onlyContent }">
      <span class="icon-check_circle" @click="changeOnlyContent"></span>
      <span>只看有内容的评价</span>
      <div class="rank">
        <span
          class="rankbyTime"
          :class="{ active: rankbyTime }"
          @click="changerankbyTime"
          >按时间</span
        >
        <span
          class="rankbyScore"
          :class="{ active: rankbyScore }"
          @click="changerankbyScore"
          >按评分</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ratingsFilter",
  props: {
    ratingsType:{
      type: Array,
    },
    selected: {
      // 2-全部，0-满意，1-不满意
      type: Number,
      default: 2,
    },
    ratings: {
      type: Array,
    },
    onlyContent: {
      type: Boolean,
      dafault: false,
    },
    rankbyTime: {
      type: Boolean,
      dafault: false,
    },
    rankbyScore: {
      type: Boolean,
      dafault: false,
    },
  },
  // 计算属性
  computed: {
    positiveCount() {
      let count = 0;
      this.ratings.forEach((item) => {
        if (item.rateType == 0) {
          count++;
        }
      });
      return count;
    },
    negativeCount() {
      let count = 0;
      this.ratings.forEach((item) => {
        if (item.rateType == 1) {
          count++;
        }
      });
      return count;
    },
  },
  methods: {
    changeSelected(arg) {
      this.$emit("update:selected", arg);
    },
    changeOnlyContent() {
      this.$emit("update:onlyContent", !this.onlyContent);
    },
    changerankbyTime() {
      this.$emit("update:rankbyTime", !this.rankbyTime);
      this.$emit("update:rankbyScore", false);
    },
    changerankbyScore() {
      this.$emit("update:rankbyScore", !this.rankbyScore);
      this.$emit("update:rankbyTime", false);
    },
  },
  created(){
    // console.log(this.ratings.length)
  }
};
</script>

<style lang="scss" scoped>
.ratings-types {
  margin: 18px 18px;
  border-bottom: 1px solid eleblack(0.1);
  .ratings-result {
    display: inline-block;
    margin: 0 12px 18px 0;
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: $sm-size;
    text-align: center;
    background-color: $e-dblue;
    border-radius: 2px;
    color: $e-grey;
  }
  .positive {
    color: $e-grey;
    background: $e-blue;
    &.active {
      color: $e-white;
      background: $e-dblue;
    }
  }
  .negative {
    background: rgb(233, 235, 236);
    &.active {
      color: white;
      background: rgb(233, 235, 236);
    }
  }
}
.onlyContent {
  padding: 0 0 18px 18px;
  font-size: $sm-size;
  line-height: 20px;
  color: $e-dgrey;
  vertical-align: top;
  position: relative;
  border-bottom: 1px solid eleblack(.1);
  &.active {
    color: rgb(0, 180, 60);
  }
  .icon-check_circle {
    font-size: 20px;
    margin-right: 4px;
    vertical-align: bottom;
  }

  .rank {
    display: inline-block;
    position: absolute;
    right: 12px;
    color: $e-grey;
    .rankbyTime {
      margin-right: 6px;
      color: $e-grey;
      &.active {
        color: $e-dblue;
      }
    }
    .rankbyScore{
      color: $e-grey;
      &.active {
        color: $e-dblue;
      }
    }
  }
}
</style>
